<template>
  <view class="content-top">
    <swiper
      @change="swiperChange"
      :style="{ height: height + 'rpx' }"
      circular="true"
      autoplay="true"
      interval="12000"
      :previous-margin="previousMargin"
      :next-margin="nextMargin"
    >
      <!-- <swiper-item v-for="(item,index) in swiperItems" :key="index" > -->
      <swiper-item
        v-for="(item, index) in swiperItems"
        @click="golist(item.id, item.type, item.types)"
        :key="index"
      >
        <view
          class="content"
          v-if="type == 1"
          :style="{
            height: height + 'rpx',
            marginLeft: margin + 'rpx',
            marginRight: margin + 'rpx',
            borderRadius: borderRadius + 'rpx',
          }"
        >
          <image :src="item.img" mode="aspectFill" class="swiper-img"></image>
          <view class="mask"></view>
          <view class="written">
            <text
              v-if="item.title"
              class="Text-initialization overflow"
              :style="{ fontSize: titleFontSize + 'rpx', color: titleColor }"
              :class="[index === enjoySiwper ? 'title' : '']"
            >
              {{ item.title }}
            </text>
            <text
              v-if="item.Subtitle"
              class="Text-initialization overflow"
              :style="{
                fontSize: SubtitleFontSize + 'rpx',
                color: SubtitleColor,
              }"
              :class="[index === enjoySiwper ? 'Subtitle' : '']"
            >
              {{ item.Subtitle }}
            </text>
            <!-- <view class="Text-initialization" v-if="button === 1" :class="[index === enjoySiwper ? 'bt' : '']">
							<text class="bt-ico">查看详情 ➜</text>
						</view> -->
          </view>
        </view>

        <view
          class="content"
          v-if="type == 2"
          :style="{
            height: height + 'rpx',
            marginLeft: margin + 'rpx',
            marginRight: margin + 'rpx',
            borderRadius: borderRadius + 'rpx',
          }"
        >
          <image
            :src="'/static/images/banner' + item.Id + '.png'"
            mode="aspectFill"
            class="swiper-img"
          ></image>
          <view class="mask"></view>
          <view class="boverlay">
            <view class="brow-top">
              <view class="b-num">${{ item.Price }}</view>
              <view class="b-title">{{ item.Name }}</view>
            </view>
            <view class="bsubtitle">{{ item.Days }}Days Contract</view>
            <view class="brow-bottom">
              <view class="item">
                <view class="blabel"> Yield & APR</view>
                <view class="bvalue">{{ item.Yield }}%</view>
              </view>
              <view class="item">
                <view class="blabel">Est. Monthly Return</view>
                <view class="bvalue"
                  >{{ (Number(item.Yield) / 12).toFixed(2) }} %</view
                >
              </view>
            </view>
          </view>
        </view>
      </swiper-item>
    </swiper>
    <view v-if="DotPosition === 1">
      <view
        class="dot"
        :style="{
          top: height - 30 - dotHeight + 'rpx',
          left: margin + 30 + dotMargin + 'rpx',
        }"
      >
        <view
          v-for="(item, index) in swiperItems"
          :key="index"
          :style="{ backgroundColor: SelectBG }"
          :class="[index === enjoySiwper ? 'Select ' : 'Unchecked']"
        ></view>
      </view>
      <view
        class="dot"
        :style="{
          top: height - 30 - dotHeight + 'rpx',
          left: margin + 30 + dotMargin + 'rpx',
        }"
      >
        <view
          v-for="(item, index) in swiperItems"
          :key="index"
          :style="{ backgroundColor: UncheckedBG }"
          :class="[index === enjoySiwper ? 'Select1 ' : 'Unchecked1']"
        ></view>
      </view>
    </view>
    <view v-if="DotPosition === 2">
      <view
        class="dot"
        :style="{
          top: height - 30 - dotHeight + 'rpx',
          right: margin + 30 + dotMargin + 'rpx',
        }"
      >
        <view
          v-for="(item, index) in swiperItems"
          :key="index"
          :style="{ backgroundColor: SelectBG }"
          :class="[index === enjoySiwper ? 'Select ' : 'Unchecked']"
        ></view>
      </view>
      <view
        class="dot"
        :style="{
          top: height - 30 - dotHeight + 'rpx',
          right: margin + 30 + dotMargin + 'rpx',
        }"
      >
        <view
          v-for="(item, index) in swiperItems"
          :key="index"
          :style="{ backgroundColor: UncheckedBG }"
          :class="[index === enjoySiwper ? 'Select1 ' : 'Unchecked1']"
        ></view>
      </view>
    </view>
    <view v-if="DotPosition === 3">
      <view class="dot-c" :style="{ top: height - 30 - dotHeight + 'rpx' }">
        <view
          v-for="(item, index) in swiperItems"
          :key="index"
          :style="{ backgroundColor: SelectBG }"
          :class="[index === enjoySiwper ? 'Select ' : 'Unchecked']"
        ></view>
      </view>
      <view class="dot-c" :style="{ top: height - 30 - dotHeight + 'rpx' }">
        <view
          v-for="(item, index) in swiperItems"
          :key="index"
          :style="{ backgroundColor: UncheckedBG }"
          :class="[index === enjoySiwper ? 'Select1 ' : 'Unchecked1']"
        ></view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    // swiperItems  循环对象
    // height  高度
    // margin  边距
    // borderRadius 圆角
    // titleFontSize 标题大小
    // titleColor 标题颜色
    // SubtitleFontSize 副标题大小
    // SubtitleColor 副标题颜色
    // dotHeight 指示点距离轮播底部高度
    // dotMargin 指示点侧边距
    // SelectBG 指示点未选中颜色
    // UncheckedBG 指示点选中颜色
    // DotPosition 指示点位置 1左侧 2右侧 3居中
    // button 查看详情按钮是否显示 1显示 0不显示
    // previousMargin 前边距，可用于露出前一项的一小部分
    // nextMargin 后边距，可用于露出后一项的一小部分

    previousMargin: {
      type: String,
      default: "0",
    },
    nextMargin: {
      type: String,
      default: "0",
    },
    swiperItems: {
      type: Array,
      default: function () {
        return new Array();
      },
    },
    height: {
      type: Number,
      default: 200,
    },
    type: {
      type: Number,
      default: 1,
    },
    margin: {
      type: Number,
      default: 30,
    },
    borderRadius: {
      type: Number,
      default: 0,
    },
    titleFontSize: {
      type: Number,
      default: 36,
    },
    titleColor: {
      type: String,
      default: "#ffffff",
    },
    SubtitleFontSize: {
      type: Number,
      default: 24,
    },
    SubtitleColor: {
      type: String,
      default: "#ffffff",
    },
    dotMargin: {
      type: Number,
      default: 0,
    },
    dotHeight: {
      type: Number,
      default: 0,
    },
    SelectBG: {
      type: String,
      default: "rgba(255, 255, 255, 0.5)",
    },
    UncheckedBG: {
      type: String,
      default: "rgba(255, 255, 255, 1)",
    },
    DotPosition: {
      type: Number,
      default: 1,
    },
    button: {
      type: Number,
      default: 1,
    },
  },

  data() {
    return {
      enjoySiwper: 0,
    };
  },
  methods: {
    golist(id, type, types) {
      //   if (id) {
      //     location.href = id;
      //   }
    },
    swiperChange: function (e) {
      //   console.log("e.detail.current", e.detail.current);

      this.enjoySiwper = e.detail.current;
      this.$emit("updaBanner", e.detail.current);
    },
  },
};
</script>

<style>
.content-top {
  /* margin-top: 30rpx; */
  position: relative;
}

.content {
  overflow: hidden !important;
  position: relative;
}

.mask {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0rpx;
  /* background: linear-gradient(to right, rgba(0, 0, 0, 0.5)0%, rgba(67, 72, 92, 0)100%); */
  z-index: 1;
}

.swiper-img {
  width: 100%;
  height: 100%;
  border-radius: 26rpx;
}

.written {
  display: flex;
  flex-direction: column;
  width: 100%;
  position: absolute;
  top: 25%;
  left: 30rpx;
  z-index: 2;
}

.boverlay {
  display: flex;
  flex-direction: column;
  width: 100%;
  position: absolute;
  /* top: 25%;
  left: 30rpx; */
  top: 33rpx;
  padding: 0 50rpx;
  z-index: 2;
}
.brow-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.b-num {
  color: #ffffff;
  font-size: 60rpx;
}
.b-title {
  font-size: 28rpx;
  color: #fdf8f8;
}
.bsubtitle {
  font-size: 30rpx;
  color: #f7f7f7;
  margin: 20rpx 0;
}
.brow-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.blabel {
  font-size: 20rpx;
  color: #f7f7f7;
}
.bvalue {
  font-size: 50rpx;
  color: #fdf8f8;
}

.Text-initialization {
  opacity: 0;
}

.title {
  font-weight: bold;
  width: 60%;
  animation: textAnimation 0.8s 0.3s forwards;
}

.Subtitle {
  width: 70%;
  animation: textAnimation 0.8s 0.5s forwards;
}

.overflow {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.bt {
  margin-top: 20rpx;
  animation: textAnimation 0.8s 0.7s forwards;
}

.bt-ico {
  color: #ffffff;
  border: #ffffff solid 1px;
  border-radius: 10rpx;
  font-size: 24rpx;
  padding: 4rpx 10rpx;
  background-color: rgb(0, 0, 0, 0.3);
}

@keyframes textAnimation {
  0% {
    opacity: 0;
    transform: translateX(-80rpx);
  }

  100% {
    opacity: 1;
  }
}

.dot {
  position: absolute;
  display: flex;
}

.Select {
  height: 6rpx;
  width: 10rpx;
  border-radius: 10rpx;
  margin-left: 10rpx;
  animation: Select 1s 0s 1 forwards;
}

.Unchecked {
  height: 6rpx;
  width: 10rpx;
  margin-left: 10rpx;
  border-radius: 10rpx;
}

@keyframes Select {
  to {
    height: 6rpx;
    width: 60rpx;
  }
}

.Select1 {
  height: 6rpx;
  width: 10rpx;
  border-radius: 10rpx;
  margin-left: 10rpx;
  animation: Select1 7s 0s 1 forwards;
  background-color: rgba(255, 255, 255, 1);
}

.Unchecked1 {
  height: 6rpx;
  width: 10rpx;
  margin-left: 10rpx;
  border-radius: 10rpx;
  background-color: rgba(255, 255, 255, 0) !important;
}

@keyframes Select1 {
  from {
    height: 6rpx;
    width: 10rpx;
  }

  to {
    height: 6rpx;
    width: 60rpx;
  }
}

.dot-c {
  position: absolute;
  width: 100%;
  flex: 1;
  display: flex;
  justify-content: center;
}
</style>
